<!--智慧消防V1.0-info页面-->
<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div style="text-align: center;margin-bottom: 30px">
                    设备维保详情信息
                </div>
                <el-form :model="maintenanceInfo" ref="maintenanceInfo"  label-width="150px">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                            <el-form-item label="设备名称" prop="equipmentName">
                                {{ maintenanceInfo.equipmentName }}
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                            <el-form-item label="所属主体" prop="enterpriseName">
                                {{ maintenanceInfo.enterpriseName }}
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                            <el-form-item label="维保企业 " prop="maintenanceEnterpriseName">
                                {{ maintenanceInfo.maintenanceEnterpriseName }}
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                            <el-form-item label="维保人员" prop="maintenanceUserName">
                                {{ maintenanceInfo.maintenanceUserName }}
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                            <el-form-item label="维保时间" prop="maintenanceTime">
                                {{ maintenanceInfo.maintenanceTime | dateFormat }}
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                            <el-form-item label="维保类型" prop="maintenanceType">
                                {{ maintenanceInfo.maintenanceType  | maintenanceTypeSatus }}
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                            <el-form-item label="维保状态" prop="maintenanceStatus">
                                {{ maintenanceInfo.maintenanceStatus | infoStatus }}
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                            <el-form-item label="维护描述" prop="maintenanceRemark">
                                {{ maintenanceInfo.maintenanceRemark }}
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                            <el-form-item label="维保计划完成时间" prop="endTime">
                                {{ maintenanceInfo.endTime  | dateFormat }}
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                            <el-form-item label="实际结束时间" prop="actualEndTime">
                                {{ maintenanceInfo.actualEndTime  | dateFormat }}
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="8">
                            <el-form-item label="维保计划开始时间" prop="startTime">
                                {{ maintenanceInfo.startTime  |  dateFormat }}
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <div class="block">
                                <span class="demonstration">维保图片</span>
                                <el-carousel trigger="click" height="150px" :autoplay="autoplay">
                                    <el-carousel-item v-for="item in maintenanceInfo.maintenancePicList " :key="item" >
                                        <img :src="item" class="avatar"/>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </el-col>
                    </el-col>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getInEquipmentMaintenanceVo} from "@/api/equipmentMaintenance";

export default {
    name: "maintenanceInfo",
    data(){
        return{
            maintenanceInfo:{
                maintenancePicList:[],
            },
            autoplay:false
        }
    },
    created() {
        this.getInEquipmentMaintenanceVo()
    },
    methods:{
        getInEquipmentMaintenanceVo(){
            getInEquipmentMaintenanceVo({ucId:this.$route.params.ucId}).then(res=>{
                this.maintenanceInfo = res.data
                // this.a=this.maintenanceInfo.maintenancePicList;
                // console.log(this.a)
                this.$notify.success({
                    title: '成功',
                    message: "获取设备信息成功"
                })
            }).catch(error=>{
                this.$notify.error({
                    title: '失败',
                    message: error.message
                })
            })
        }
    },
    filters:{
        infoStatus(val){
            let status = "";
            switch (val){
                case 0:
                    status = "未维护";
                    break;
                case 1:
                    status = "维护中";
                    break;
                case 2:
                    status = "维护完成";
                    break;
                default:
                    break;
            }
            return status;
        },
        maintenanceTypeSatus(val){
            let maintenanceType = "";
            switch (val){
                case 0:
                    maintenanceType = "正常维护";
                    break;
                case 1:
                    maintenanceType = "维修机器";
                    break;
                case 2:
                    maintenanceType = "更换机器";
                    break;
                default:
                    break;
            }
            return maintenanceType;
        }
    }

}
</script>
<style>
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 149px;
    height: 149px;
    line-height: 149px;
    text-align: center;
}
.avatar {
    width: 149px;
    height: 149px;
    display: block;
    margin: 0 auto; /*水平居中*/
}
</style>
